﻿@page "/components/tab"
<LayoutContent AnchorItems="@(new[]{"基础选项卡","带图标的选项卡","不同尺寸的选项卡","卡片选项卡","禁用选项卡","API"})">
<PageHeader Title="Tab 选项卡">
    用于承载同一层级下不同页面或类别的组件，方便用户在同一个页面框架下进行快速切换。
</PageHeader>

<Example Title="基础选项卡" RunStyle="@Code.BgRun">
    <Description>使用选项卡切换内容模块，操作后不会进行页面跳转。</Description>
    <RunContent>
        <TTab>
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTab>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>
```
")
    </CodeContent>
</Example>
<Example Title="带图标的选项卡" RunStyle="@Code.BgRun">
    <Description>在基础选项卡基础上，在每个标签前添加图标，方便用户快速理解。</Description>
    <RunContent>
        <TTab>
            <TTabItem Title="首页" TIcon="IconName.Home">首页的内容</TTabItem>
            <TTabItem Title="日程" TIcon="IconName.Calendar">日程的内容</TTabItem>
            <TTabItem Title="事项" TIcon="IconName.ViewList">事项的内容</TTabItem>
        </TTab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTab>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>
```
")
    </CodeContent>
</Example>

<Example Title="不同尺寸的选项卡" RunStyle="@Code.BgRun">
    <Description>提供 大、中（默认）两种尺寸。</Description>
    <RunContent>
        <TTab>
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>

        <TTab Size="TabSize.Large">
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTab>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>

<TTab Size=""TabSize.Large"">
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>
```
")
    </CodeContent>
</Example>
<Example Title="卡片选项卡" RunStyle="@Code.BgRun">
    <Description></Description>
    <RunContent>
        <TTab TCard>
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTab TCard>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>
```
")
    </CodeContent>
</Example>

<Example Title="禁用选项卡" RunStyle="@Code.BgRun">
    <Description></Description>
    <RunContent>
        <TTab>
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Disabled Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>

        <TTab TCard>
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Disabled Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTab>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Disabled Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>


<TTab TCard>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Disabled Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>
```
        ")
    </CodeContent>
    </Example><div id="API"></div>
<ComponentAPI Component="typeof(TTab)"></ComponentAPI>
<ComponentAPI Component="typeof(TTabItem)"></ComponentAPI>
</LayoutContent>